import React from 'react';
import { Platform, StyleSheet, Text } from 'react-native';
import { Card } from '@ant-design/react-native';
import { Container } from '@/rcomponents/Container';
import Metrics from '@/Themes/Metrics';

const { isPad } = Platform;
const styles = StyleSheet.create({
  card: {
    marginBottom: isPad ? Metrics.s10 : Metrics.s5,
  },
  title: {
    fontWeight: 'bold',
    fontSize: isPad ? Metrics.sizes.size20 : Metrics.sizes.size16,
  },
  body: {
    paddingHorizontal: isPad ? Metrics.s20 : Metrics.s8,
  },
});
export default function ResponsiveCard({ children, ...props }) {
  let style = styles.card;
  if (props.style) {
    style = { ...props.style, ...style };
  }
  return (
    <Card {...props} style={style}>
      {children}
    </Card>
  );
}

ResponsiveCard.Header = ({ title, extra }) => {
  return (
    <Card.Header
      title={<Text style={styles.title}>{title}</Text>}
      extra={extra && <Container float="right">{extra}</Container>}
    />
  );
};

ResponsiveCard.Body = ({ children }) => {
  return <Card.Body style={styles.body}>{children}</Card.Body>;
};
ResponsiveCard.Footer = ({ content, extra }) => {
  return (
    <Card.Footer
      content={content}
      extra={extra && <Container float="right">{extra}</Container>}
    />
  );
};
